/*
 * @Author: wangtao
 * @Date: 2020-10-20 16:13:12
 * @LastEditors: kanglang
 * @LastEditTime: 2021-01-25 20:49:09
 * @Description: file content
 */
import React, { Component, Fragment } from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';
import { XMEmpty, msg } from '@/common';
import { Submit } from '@/common/button';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  screenWidth,
} from '@/styles';
import { empty04 } from '@/images';
import CarItem from './car-item';

export default class CarList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { carList } = this.props;
    return (
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={{ backgroundColor: mainBgColorLightGray }}
        contentContainerStyle={{ paddingBottom: px2dp(100) }}
      >
        <View style={styles.list}>
          {carList.length ? (
            carList.map((item, index) => {
              return <CarItem item={item} />;
            })
          ) : (
            <XMEmpty
              emptyImg={empty04}
              desc='您还没有绑定车辆噢~'
              boxStyle={{
                marginTop: px2dp(180),
              }}
              renderFooter={() => {
                return (
                  <Submit
                    text='+ 新增车辆'
                    boxStyle={{
                      width: px2dp(640),
                      height: px2dp(96),
                      borderRadius: px2dp(12),
                      overflow: 'hidden',
                      marginTop: px2dp(80),
                    }}
                    btnStyle={{}}
                    btnTextStyle={{
                      fontSize: px2dp(36),
                    }}
                    onClick={() => {
                      msg.emit('router: goToNext', { routeName: 'TruckCert', type: 'add' });
                    }}
                  />
                );
              }}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  list: {
    backgroundColor: mainBgColorLightGray,
    width: screenWidth,
    flex: 1,
    paddingHorizontal: px2dp(24),
    alignItems: 'center',
  },
});
